<%@ include file="/taglibs.jsp"%>

<fmt:message key="date.format" var="df" scope="page"/>

<head>
	<title><fmt:message key="fileList.title"/></title>
</head>

<s:set name="files" value="fileList" scope="request"/>
<s:form name="fileForm" action="user-files-submit" method="post">
    <s:select name="groupId" label="%{getText('file.group')}" list="departments" listKey="id" listValue="name" headerKey="%{getText('select.default.key')}" headerValue="%{getText('select.default.value')}"/>
    
<tr>
	<td>
        <s:property value="getText('file.user')"/>
    </td>
    <td>
        <s:select
        headerKey="%{getText('select.default.key')}" headerValue="%{getText('select.default.value')}"
        list="listUser" 
        listValue="fullname"
        name="userId" 
	 	listKey="id"
	 	theme="simple"
         />    
    </td>
</tr>
 	
<tr>
	<td width="100px">
        <s:property value="getText('file.input.fromDate')"/>
    </td>
    <td width="250px">
        <s:textfield id="fromDate" name="fromDate" readonly="true" size="11" theme="simple"/>
        <button id="fromDateCal" type="button" class="button"> ... </button> 
    </td>
	<td width="50px">
        <s:property value="getText('file.input.toDate')"/>
    </td>
	<td>
		<s:textfield id="toDate" name="toDate" readonly="true" size="11" theme="simple"/>
        <button id="toDateCal" type="button" class="button"> ... </button> 
	</td>
</tr>
<tr>
	<td>
		<button type="submit" onclick="this.blur()" class="button" name="search" >
					<fmt:message key="button.search.title"></fmt:message>
					<img src="${ctx}/images/btn_search.png" align="left" height="20"
						width="20">
		</button>
	</td>
</tr>
</s:form>

<display:table name="files" class="table" requestURI="" id="fileMgr" >
    
    <display:column style="width:250px" property="file.submitter" titleKey="file.submitter" escapeXml="true"/>
    
    <display:column property="approvedComment" sortable="true" titleKey="file.exchange.info" escapeXml="true"/>
    <display:column sortable="true" titleKey="file.inputDate" escapeXml="true" sortProperty="f.inputDate">
    	<joda:format value="${fileMgr.file.inputDate}" pattern="dd/MM/yyyy"/>
    </display:column>
    <display:column sortable="true" titleKey="file.outputDate" escapeXml="true" sortProperty="f.outputDate">
    	<joda:format value="${fileMgr.file.outputDate}" pattern="dd/MM/yyyy"/>
    </display:column>
    <display:column sortable="true" titleKey="file.approvedDate" escapeXml="true" sortProperty="approvedDate">
    	<joda:format value="${fileMgr.approvedDate}" pattern="dd/MM/yyyy"/>
    </display:column>
    <c:if test="${fileMgr.approvedDate eq null}">
    	<display:column titleKey="fileStatus.item_name">
    		<s:text name="fileStatus.in.progress"/>
    	</display:column>
    </c:if>
    <c:if test="${fileMgr.approvedDate ne null}">
    	<display:column titleKey="fileStatus.item_name">
    		<s:text name="fileStatus.progressed"/>
    	</display:column>
    </c:if>
    
    <display:column style="width:30px" sortable="false" href="viewFile.html" media="html" paramId="id" paramProperty="file.id" titleKey="button.detail.title">
        Xem
    </display:column>
</display:table>

<script type="text/javascript">highlightTableRows("fileMgr");
new Calendar({
	inputField: "fromDate",
	dateFormat: "%d/%m/%Y",
	trigger: "fromDateCal",
	bottomBar: false,
	onSelect: function() { this.hide(); }
});
new Calendar({
    inputField: "toDate",
    dateFormat: "%d/%m/%Y",
    trigger: "toDateCal",
    bottomBar: false,
    onSelect: function() { this.hide(); }
});

$(document).ready(function (){
	var currentTime = new Date();
	var month = currentTime.getMonth() + 1;
	var day = currentTime.getDate();
	if(month < 10) month = "0" + month;
	if(day < 10) day = "0" + day;
	var year = currentTime.getFullYear();
	
	var today = day + "/" + month + "/" + year;
	
	if($("#fromDate").val()=="")
  		$("#fromDate").val(today);
	
	if($("#toDate").val()=="")
  		$("#toDate").val(today);
});

$('select[name="groupId"]').change(function(){
	if ($(this).val() != "0") {
		$.blockUI({ message: ajaxAnimation }); 
		$.ajax({
		  url: 'searchUserByGroup.html',
		  data : {'groupId' : $(this).val()},
		  dataType : 'json',
		  success: function(data) {
			  	var userHTML = "";
				$.each(data.listUser, function() {
					userHTML += '<option value="' + this.value + '">' + this.name + '</option>';
				});			 
				$('select[name="userId"]').html($('select[name="userId"] :first').clone().wrap('<div>').parent().html() + userHTML);										
		  }
		});
	}
});

</script>
